component.search

search-advanced


30 Search results
Image
What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

read more

Image
What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

read more

Image
What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

read more

Image
What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

read more

<div class="widget widget-heading-simple widget-body-gray">
	<div class="widget-body">
		<div class="row">
			<div class="col-md-4 center">
				<label class="strong">Search for</label>
				<input type="text" class="form-control" placeholder="Type your keywords .. " />
				
				<div class="separator top"></div>
				<label class="strong">Options</label>
				<div class="uniformjs">
					<label class="checkbox" style="display: inline-block;">
						<input type="checkbox" class="checkbox" value="1" />
						Sexxxxy
					</label>
					<label class="checkbox" style="display: inline-block; margin-left: 10px; margin-top: 10px;">
						<input type="checkbox" class="checkbox" value="1" checked="checked" />
						Checked
					</label>
				</div>
			</div>
			<div class="col-md-4 center">
				<label class="strong">Date from</label>
				<div class="input-group date" id="datepicker1">
				    <input class="form-control" type="text" value="14 February 2013">
				    <span class="input-group-addon"><i class="icon-th"></i></span>
				</div>
				<div class="separator top"></div>

				<label class="strong">Date to</label>
				<div class="input-group date" id="datepicker2">
				    <input class="form-control" type="text" value="14 February 2013">
				    <span class="input-group-addon"><i class="icon-th"></i></span>
				</div>
			</div>
			<div class="col-md-4 center">
				<label class="strong">Other options</label><br/>
				<div class="btn-group" data-toggle="buttons-checkbox">
				    <button type="button" class="active btn btn-inverse">Left</button>
				    <button type="button" class="active btn btn-inverse">Middle</button>
				    <button type="button" class="btn btn-inverse">Right</button>
				</div>
				<div class="separator bottom"></div>
				<button type="submit" class="btn btn-primary btn-large btn-block" data-loading-text="Now searching ..." data-toggle="btn-loading"><i class="icon-search"></i> Start Searching</button>
			</div>
		</div>
	</div>
</div>

<div class="widget widget-heading-simple widget-body-white margin-none">
	<div class="widget-body">
		<h5 class="text-uppercase strong separator bottom">30 Search results</h5>
		
		
		<div class="panel-group accordion" id="tabAccountAccordion">

		    <!-- Accordion Item -->
		    <div class="panel panel-default">
		        <div class="panel-heading">
		            <h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-1-1">Lorem ipsum dolor sit amet?</a></h4>
		        </div>
		        <div id="collapse-1-1" class="panel-collapse collapse">
		            <div class="panel-body">
		            	<div class="row">	
							<div class="col-md-2 center">
								<a href="" class="thumb"><img data-src="holder.js/110x100" alt="Image" /></a>
							</div>
							<div class="col-md-10">
								<h5 class="strong text-uppercase">What is Lorem Ipsum?</h5>
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
								<p class="margin-none strong"><a href="" class="glyphicons single chevron-right"><i></i>read more</a></p>
							</div>
						</div>
					</div>
		        </div>
		    </div>
		    <!-- // Accordion Item END -->
		
		    <!-- Accordion Item -->
		    <div class="panel panel-default">
		        <div class="panel-heading">
		            <h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-2-1">Quisque porttitor elit ac mauris?</a></h4>
		        </div>
		        <div id="collapse-2-1" class="panel-collapse collapse in">
		            <div class="panel-body">
		            	<div class="row">	
							<div class="col-md-2 center">
								<a href="" class="thumb"><img data-src="holder.js/110x100" alt="Image" /></a>
							</div>
							<div class="col-md-10">
								<h5 class="strong text-uppercase">What is Lorem Ipsum?</h5>
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
								<p class="margin-none strong"><a href="" class="glyphicons single chevron-right"><i></i>read more</a></p>
							</div>
						</div>
					</div>
		        </div>
		    </div>
		    <!-- // Accordion Item END -->
		
		    <!-- Accordion Item -->
		    <div class="panel panel-default">
		        <div class="panel-heading">
		            <h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-3-1">Vivamus eros tortor consequat sed?</a></h4>
		        </div>
		        <div id="collapse-3-1" class="panel-collapse collapse">
		            <div class="panel-body">
		            	<div class="row">	
							<div class="col-md-2 center">
								<a href="" class="thumb"><img data-src="holder.js/110x100" alt="Image" /></a>
							</div>
							<div class="col-md-10">
								<h5 class="strong text-uppercase">What is Lorem Ipsum?</h5>
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
								<p class="margin-none strong"><a href="" class="glyphicons single chevron-right"><i></i>read more</a></p>
							</div>
						</div>
					</div>
		        </div>
		    </div>
		    <!-- // Accordion Item END -->
		
		    <!-- Accordion Item -->
		    <div class="panel panel-default">
		        <div class="panel-heading">
		            <h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-4-1">Etiam suscipit leo tincidunt mi volutpat?</a></h4>
		        </div>
		        <div id="collapse-4-1" class="panel-collapse collapse">
		            <div class="panel-body">
		            	<div class="row">	
							<div class="col-md-2 center">
								<a href="" class="thumb"><img data-src="holder.js/110x100" alt="Image" /></a>
							</div>
							<div class="col-md-10">
								<h5 class="strong text-uppercase">What is Lorem Ipsum?</h5>
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
								<p class="margin-none strong"><a href="" class="glyphicons single chevron-right"><i></i>read more</a></p>
							</div>
						</div>
					</div>
		        </div>
		    </div>
		    <!-- // Accordion Item END -->
		
		</div>
		<div class="separator bottom"></div>
		<ul class="pagination margin-none">
	        <li class="disabled"><a href="#">&lt;</a></li>
	        <li class="active"><a href="#">1</a></li>
	        <li><a href="#">2</a></li>
	        <li><a href="#">3</a></li>
	        <li><a href="#">&gt;</a></li>
	    </ul>
	</div>
</div>








Code

@import "http://localhost/shared/components/modules/admin/forms/elements/bootstrap-datepicker/assets/lib/css/bootstrap-datepicker.css";
@import "http://localhost/shared/components/modules/admin/forms/elements/bootstrap-datepicker/assets/custom/less/bootstrap-datepicker.less";
@import "http://localhost/shared/components/modules/admin/forms/elements/uniform/assets/lib/css/uniform.default.css";
@import "http://localhost/shared/components/modules/admin/forms/elements/uniform/assets/custom/less/uniformjs.less";
@import "http://localhost/shared/components/modules/admin/widgets/accordions/assets/less/accordions.less";
@import "assets/components/modules/admin/ui/pagination/pagination-bootstrap/assets/pagination.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/gallery.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/forms/elements/bootstrap-datepicker/assets/lib/js/bootstrap-datepicker.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/forms/elements/bootstrap-datepicker/assets/custom/js/bootstrap-datepicker.init.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/forms/elements/uniform/assets/lib/js/jquery.uniform.min.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/forms/elements/uniform/assets/custom/js/uniform.init.js?v=v1.2.3"></script>
<script src="assets/components/plugins/holder/holder.js?v=v1.2.3"></script>

search-media

30 Search results

<div class="widget widget-heading-simple widget-body-simple text-right">
	<form class="input-group">
	  	<input type="text" class="form-control" placeholder="Type your keywords .. " />
	  	<span class="input-group-btn"><button type="submit" class="btn btn-inverse">Search</button></span>
	</form>
</div>
<div class="widget widget-heading-simple widget-body-white margin-none">
	<div class="widget-body">
		<h5 class="text-uppercase strong separator bottom">30 Search results</h5>
		
		<!-- Gallery Layout -->
		<div class="gallery gallery-2">
			<ul class="row" data-toggle="modal-gallery" data-target="#modal-gallery" id="gallery-4" data-delegate="#gallery-4">
								<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/8.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/8.jpg" alt="photo" class="img-responsive" /></a></li>
								<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/7.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/7.jpg" alt="photo" class="img-responsive" /></a></li>
								<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/6.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/6.jpg" alt="photo" class="img-responsive" /></a></li>
								<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/5.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/5.jpg" alt="photo" class="img-responsive" /></a></li>
								<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/4.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/4.jpg" alt="photo" class="img-responsive" /></a></li>
								<li class="col-md-3"><a class="thumb" href="../assets/images/gallery-2/3.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/3.jpg" alt="photo" class="img-responsive" /></a></li>
								<li class="col-md-3"><a class="thumb" href="../assets/images/gallery-2/2.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/2.jpg" alt="photo" class="img-responsive" /></a></li>
								<li class="col-md-3"><a class="thumb" href="../assets/images/gallery-2/1.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/1.jpg" alt="photo" class="img-responsive" /></a></li>
							</ul>
		</div>
		<!-- // Gallery Layout END -->
		
		<hr class="separator" />
		<ul class="pagination margin-none">
	        <li class="disabled"><a href="#">&lt;</a></li>
	        <li class="active"><a href="#">1</a></li>
	        <li><a href="#">2</a></li>
	        <li><a href="#">3</a></li>
	        <li><a href="#">&gt;</a></li>
	    </ul>
		
	</div>
</div>




<!-- Blueimp Gallery -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev no-ajaxify">‹</a>
    <a class="next no-ajaxify">›</a>
    <a class="close no-ajaxify">×</a>
    <a class="play-pause no-ajaxify"></a>
    <ol class="indicator"></ol>
</div>
<!-- // Blueimp Gallery END -->




Code

@import "http://localhost/shared/components/modules/admin/gallery/blueimp-gallery/assets/lib/css/blueimp-gallery.min.css";
@import "http://localhost/shared/components/modules/admin/gallery/blueimp-gallery/assets/custom/blueimp-gallery.less";
@import "assets/components/core/less/gallery.less";
@import "assets/components/modules/admin/ui/pagination/pagination-bootstrap/assets/pagination.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/core/less/forms.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/gallery/blueimp-gallery/assets/lib/js/blueimp-gallery.min.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/gallery/blueimp-gallery/assets/lib/js/jquery.blueimp-gallery.min.js?v=v1.2.3"></script>

search-simple

30 Search results
Image
What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

read more


What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

read more

Image

Image
What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

read more


<div class="widget widget-heading-simple widget-body-simple text-right">
	<form class="input-group">
	  	<input type="text" class="form-control" placeholder="Type your keywords .. " />
	  	<span class="input-group-btn"><button type="submit" class="btn btn-inverse">Search</button></span>
	</form>
</div>
<div class="widget widget-heading-simple widget-body-white margin-none">
	<div class="widget-body">
		<h5 class="text-uppercase strong separator bottom">30 Search results</h5>
		
		<div class="row">	
			<div class="col-md-2 center">
				<a href="" class="thumb"><img data-src="holder.js/150x100" alt="Image" class="img-responsive" /></a>
			</div>
			<div class="col-md-10">
				<h5 class="strong text-uppercase">What is Lorem Ipsum?</h5>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
				<p class="margin-none strong"><a href="" class="glyphicons single chevron-right"><i></i>read more</a></p>
			</div>
		</div>
		<hr class="separator" />
		<div class="row">	
			<div class="col-md-10">
				<h5 class="strong text-uppercase">What is Lorem Ipsum?</h5>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
				<p class="margin-none strong"><a href="" class="glyphicons single chevron-right"><i></i>read more</a></p>
			</div>
			<div class="col-md-2 center">
				<a href="" class="thumb"><img data-src="holder.js/150x100" alt="Image" class="img-responsive" /></a>
			</div>
		</div>
		<hr class="separator" />
		<div class="row">	
			<div class="col-md-2 center">
				<a href="" class="thumb"><img data-src="holder.js/150x100" alt="Image" class="img-responsive" /></a>
			</div>
			<div class="col-md-10">
				<h5 class="strong text-uppercase">What is Lorem Ipsum?</h5>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
				<p class="margin-none strong"><a href="" class="glyphicons single chevron-right"><i></i>read more</a></p>
			</div>
		</div>
		<hr class="separator" />
	    <ul class="pagination margin-none">
	        <li class="disabled"><a href="#">&lt;</a></li>
	        <li class="active"><a href="#">1</a></li>
	        <li><a href="#">2</a></li>
	        <li><a href="#">3</a></li>
	        <li><a href="#">&gt;</a></li>
	    </ul>
		
	</div>
</div>






Code

@import "assets/components/modules/admin/ui/pagination/pagination-bootstrap/assets/pagination.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/gallery.less";
@import "assets/components/core/less/forms.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/plugins/holder/holder.js?v=v1.2.3"></script>

search-users

30 Search results

Photo Full name Location Membership Actions
Image Lorem Ipsum Dolor Romania view on map Accepted View
Image John Doe United States view on map Accepted View
Image Jane Doe Europe view on map Rejected Accept
Image Lorem Dolor Asia view on map Rejected Accept

<div class="widget widget-heading-simple widget-body-simple text-right">
	<form class="input-group">
	  	<input type="text" class="form-control" placeholder="Type your keywords .. " />
	  	<span class="input-group-btn"><button type="submit" class="btn btn-inverse">Search</button></span>
	</form>
</div>
<div class="widget widget-heading-simple widget-body-white margin-none">
	<div class="widget-body">
		<h5 class="text-uppercase strong">30 Search results</h5>
		<hr class="separator" />
		<table class="table table-vertical-center">
			<thead>
				<tr>
					<th class="center">Photo</th>
					<th class="center">Full name</th>
					<th class="center">Location</th>
					<th class="center">Membership</th>
					<th class="center">Actions</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="center"><img data-src="holder.js/50x50/dark" alt="Image" /></td>
					<td class="strong center">Lorem Ipsum Dolor</td>
					<td class="center">Romania <a href="" class="innerL text-underline">view on map <i class="fa fa-map-marker"></i></a></td>
					<td class="center"><span class="label label-success"><i class="fa fa-ok"></i> Accepted</span></td>
					<td class="center"><a href="" class="btn btn-xs btn-primary">View <i class="fa fa-eye-open"></i></a></td>
				</tr>
				<tr>
					<td class="center"><img data-src="holder.js/50x50/dark" alt="Image" /></td>
					<td class="strong center">John Doe</td>
					<td class="center">United States <a href="" class="innerL text-underline">view on map <i class="fa fa-map-marker"></i></a></td>
					<td class="center"><span class="label label-success"><i class="fa fa-ok"></i> Accepted</span></td>
					<td class="center"><a href="" class="btn btn-xs btn-primary">View <i class="fa fa-eye-open"></i></a></td>
				</tr>
				<tr>
					<td class="center"><img data-src="holder.js/50x50/dark" alt="Image" /></td>
					<td class="strong center">Jane Doe</td>
					<td class="center">Europe <a href="" class="innerL text-underline">view on map <i class="fa fa-map-marker"></i></a></td>
					<td class="center"><span class="label label-danger"><i class="fa fa-remove"></i> Rejected</span></td>
					<td class="center"><a href="" class="btn btn-xs btn-success">Accept <i class="fa fa-ok"></i></a></td>
				</tr>
				<tr>
					<td class="center"><img data-src="holder.js/50x50/dark" alt="Image" /></td>
					<td class="strong center">Lorem Dolor</td>
					<td class="center">Asia <a href="" class="innerL text-underline">view on map <i class="fa fa-map-marker"></i></a></td>
					<td class="center"><span class="label label-danger"><i class="fa fa-remove"></i> Rejected</span></td>
					<td class="center"><a href="" class="btn btn-xs btn-success">Accept <i class="fa fa-ok"></i></a></td>
				</tr>
			</tbody>
		</table>
		
		<hr class="separator" />
		<ul class="pagination margin-none">
	        <li class="disabled"><a href="#">&lt;</a></li>
	        <li class="active"><a href="#">1</a></li>
	        <li><a href="#">2</a></li>
	        <li><a href="#">3</a></li>
	        <li><a href="#">&gt;</a></li>
	    </ul>
		
	</div>
</div>








Code

@import "assets/components/modules/admin/tables/classic/assets/less/tables.less";
@import "assets/components/modules/admin/ui/pagination/pagination-bootstrap/assets/pagination.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/gallery.less";
@import "assets/components/core/less/forms.less";
@import "assets/components/core/less/labels.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/plugins/holder/holder.js?v=v1.2.3"></script>